<template>
  <el-menu
    router
    unique-opened
    class="el-menu-vertical"
    background-color="#ff674b"
    text-color="#fff"
    active-text-color="#fff"
    :default-active="$route.path"
  >
    <el-menu-item
      index="/home"
      :class="{ 'is-active': $route.path === '/home' }"
    >
      <i class="el-icon-s-home" style="color: #fff"></i>
      <span slot="title"> 管理中心 </span>
    </el-menu-item>

    <!-- index属性的值必须是一个字符串 -->
    <el-submenu :index="item.id + ''" v-for="item in navList" :key="item.id">
      <template slot="title">
        <i :class="item.icon" style="color: #fff"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        :class="{ 'is-active': $route.path === val.url }"
        v-for="val in item.children"
        :key="val.id"
        :index="val.url"
        >{{ val.title }}</el-menu-item
      >
    </el-submenu>

    <!-- <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-tools" style="color: #fff"></i>
        <span>系统设置</span>
      </template>
      <el-menu-item index="/menu">菜单管理</el-menu-item>
      <el-menu-item index="/role">角色管理</el-menu-item>
      <el-menu-item index="/admin">管理员管理</el-menu-item>
    </el-submenu>

    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-goods" style="color: #fff"></i>
        <span>商城管理</span>
      </template>
      <el-menu-item index="/cate">分类管理</el-menu-item>
      <el-menu-item index="/specs">规格管理</el-menu-item>
      <el-menu-item index="/goods">商品管理</el-menu-item>
    </el-submenu> -->
  </el-menu>
</template>

<script>
// 导入vuex辅助函数
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["navList"]),
  },
};
</script>

<style>
/* 导航菜单高亮样式 */
li.is-active {
  background: rgba(0, 0, 0, 0.2) !important;
}
</style>